<template>
  <v-content >
    <div class="mw-column-style" style="background-color: #ffffff;margin-bottom:0.79rem;" v-vuet-scroll="{ path: 'addresslist', name: 'content' }">
      <div v-for="(item,index) in data.list">
        <div class="mw-row-style" style="padding:0.15rem;height:0.6rem;width:3.45rem">
          <div class="mw-column-style" style="width: 0.6rem;margin-right:0.15rem;">
            <div class="mw-first-text-color mw-single-line" style="font-size: 0.15rem;width:100%">{{item.name}}</div>
            <div v-if="item.default == 1" style="border-radius:0.02rem;color: #ED3D5D;font-size: 0.11rem;width: 0.3rem;text-align: center;
border:1px solid rgba(237,61,93,1);">默认</div>
          </div>
          <div class="mw-column-style" style="width: 2.31rem;margin-right:0.15rem;">
            <div class="mw-first-text-color mw-single-line" style="font-size: 0.15rem;width:100%;margin-bottom: 0.04rem">{{item.mobile}}</div>
            <div class="mw-third-text-color mw-n-line" style="font-size: 0.13rem;width:100%;">{{item.full_address}}</div>
          </div>
          <div class="mw-column-style">
            <img src="/static/edit_address.png" style="height:0.2rem;width: 0.2rem;margin-bottom: 0.1rem"/>
            <img @click="data.deleteaddress(item)" src="/static/delete_address.png" style="height:0.2rem;width: 0.2rem;"/>
          </div>
        </div>
        <div class="mw-horizon-divider" style="height:1px"></div>
      </div>
    </div>
    <div @click="skipToAdd" class="mw-row-style" style="position: fixed;bottom:0;width: 3.75rem;height:0.79rem;justify-content: center;align-items: center">
      <div style="width:3.45rem;
height:0.49rem;
border-radius:0.08rem;
border:1px solid rgba(237,61,93,1);line-height: 0.49rem;text-align: center;font-size: 0.15rem;font-weight: bold;color: #ED3D5D">新增地址</div>
    </div>
  </v-content>


</template>

<script>
  import utils from '../../utils'
  import httputil from '../../httputil'

  import {mapModules, mapRules} from 'vuet'

  export default {
    mixins: [
      mapModules({data: 'addresslist'}),
      mapRules({store: [{ path: 'addresslist' }],need: [{ path: 'addresslist' }]}),
    ],
    components: {

    },
    data() {
      return {

      }
    },
    methods: {
      skipToAdd() {
        this.$router.push({ name: 'newaddress'})
      }
    },

    created() {

    },

    mounted() {

    },

  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
